<template>
	<view class="container">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">收付款设置</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--收付款设置start-->
		<view class="set_deposite">
			<view class="tab" :class="{active:isActive}">
				<text :class="navIndex==0?'on':''" @click="checkIndex(0)">收款账号</text>
				<text :class="navIndex==1?'on':''" @click="checkIndex(1)">付款方式</text>
			</view>
			
			<!--收款账号start-->
			<view v-show="navIndex==0">
				<view class="set_account">
					<u-cell-group :border="border">
						<u-cell title="支付宝" :border="border">
							<image src="/static/images/img_63.png" slot="icon" class="img"></image>
							<image src="/static/images//img_66.png" slot="value" class="ico"></image>
						</u-cell>
						<u-cell title="银行卡" :border="border">
							<image src="/static/images/img_67.png" slot="icon" class="img"></image>
							<image src="/static/images//img_66.png" slot="value" class="ico"></image>
						</u-cell>
						<u-cell title="微信支付" :border="border">
							<image src="/static/images/img_64.png" slot="icon" class="img"></image>
							<image src="/static/images//img_66.png" slot="value" class="ico"></image>
						</u-cell>
						<u-cell title="添加账号" :border="border" class="add">
							<image src="/static/images/img_68.png" slot="icon" class="img"></image>
						</u-cell>
					</u-cell-group>
				</view>
			</view>
			<!--收款账号end-->
			
			<!--付款方式start-->
			<view v-show="navIndex==1">
				<view class="set_account set_account01">
					<u-cell-group :border="border">
						<u-cell title="支付宝" :border="border">
							<image src="/static/images/img_63.png" slot="icon" class="img"></image>
							<u-switch slot="value" v-model="value2" activeColor="#4AB893"  inactiveColor="#E6E6E6" size="23"></u-switch>
						</u-cell>
						<u-cell title="微信支付" :border="border">
							<image src="/static/images/img_64.png" slot="icon" class="img"></image>
							<u-switch slot="value" v-model="value1" activeColor="#4AB893"  inactiveColor="#E6E6E6" size="23"></u-switch>
						</u-cell>
						<u-cell title="银行卡" :border="border">
							<image src="/static/images/img_67.png" slot="icon" class="img"></image>
							<u-switch slot="value" v-model="value" activeColor="#4AB893"  inactiveColor="#E6E6E6" size="23"></u-switch>
						</u-cell>
					</u-cell-group>
					<view class="tips">选择您习惯的付款方式，系统将优先为您推送符合您偏好的卖家。</view>
				</view>
			</view>
			<!--付款方式end-->
			
		</view>
		<!--收付款设置end-->
		
		<!--弹窗start-->
		<!--<u-popup mode="bottom" :show="zfb_show" :closeOnClickOverlay="true" @close="close_zfb">
			<view class="zfb_box">
				<view class="tit">
					<view><image src="/static/images/img_74.png"></image>支付宝<text>CNY</text></view>
					<image src="/static/images/img_31.png" class="box_close" @tap="close_zfb"></image>
				</view>
				<view class="list">
					<view><label>姓名</label><text>朱元璋</text></view>
					<view><label>账号</label><text>1235875632</text></view>
					<view>
						<label>二维码</label>
						<image src="/static/images/img_76.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="btn">
					<button class="submit on">编辑账号</button>
					<button class="back_btn" @tap="box_tips">删除账号</button>
					<u-safe-bottom></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="bottom"  :show="wx_show" :closeOnClickOverlay="true" @close="close_wx">
			<view class="zfb_box">
				<view class="tit">
					<view><image src="/static/images/img_75.png"></image>微信<text>CNY</text></view>
					<image src="/static/images/img_31.png" class="box_close" @tap="close_wx"></image>
				</view>
				<view class="list">
					<view><label>姓名</label><text>朱元璋</text></view>
					<view><label>账号</label><text>1235875632</text></view>
					<view>
						<label>二维码</label>
						<image src="/static/images/img_78.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="btn">
					<button class="submit on">编辑账号</button>
					<button class="back_btn" @tap="box_tips">删除账号</button>
					<u-safe-bottom></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="bottom"  :show="yhk_show" :closeOnClickOverlay="true" @close="close_yhk">
			<view class="zfb_box">
				<view class="tit">
					<view><image src="/static/images/img_73.png"></image>银行卡<text>CNY</text></view>
					<image src="/static/images/img_31.png" class="box_close" @tap="close_yhk"></image>
				</view>
				<view class="list">
					<view><label>姓名</label><text>朱元璋</text></view>
					<view><label>账号</label><text>9559 9800 8458 9499 887</text></view>
					<view><label>开户行</label><text>中国农业银行</text></view>
				</view>
				<view class="btn">
					<button class="submit on">编辑账号</button>
					<button class="back_btn" @tap="box_tips">删除账号</button>
					<u-safe-bottom></u-safe-bottom>
				</view>
			</view>
		</u-popup>-->
		
		<!--弹窗end-->
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navIndex: 0,
				border:false,
				value1: true,
				value2: true,
				value: false,
				isActive: false,
				zfb_show: false,
				wx_show: false,
				yhk_show: false,
			}
		},
		methods:{
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
				if(this.navIndex == 1){
					this.isActive = true
				}else{
					this.isActive = false
				}
			},
			zfb_open(){
				this.zfb_show = true
			},
			yhk_open(){
				this.yhk_show = true
			},
			wx_open(){
				this.wx_show = true
			},
			close_wx(){
				this.wx_show = false
			},
			close_zfb(){
				this.zfb_show = false
			},
			close_yhk(){
				this.yhk_show = false
			},
			
		}
	}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("./my.scss");
</style>